<template>
  <div class="dialog">
    <!-- 动力柜弹窗控件 -->
    <el-dialog
      width="60%"
      :visible.sync="Dialog"
      @close="closeDialog"
      append-to-body
      :close-on-click-modal="false"
    >
      <div slot="title" class="clearfix">
        <div class="title">
          <img
            class="title_img"
            src="@/assets/img/chart/time.png"
            alt=""
            srcset=""
          />
          <span class="title_time">{{ getDate() }}</span>
        </div>
        <span class="title_top">动力柜详情</span>
      </div>
      <el-row :gutter="20">
        <el-col :span="10">
          <dongligui :data="data"></dongligui>
        </el-col>
        <el-col :span="12" style="float: right">
          <el-row style="margin-top: 20%">
            <el-col :span="12">
              <el-row>
                <el-col :span="24">
                  <div class="title_item">
                    <span>当班耗电量(kw·h)</span>
                    <span class="title_value">{{
                      !itemData.dbhdSum
                        ? 0
                        : Number(itemData.dbhdSum).toFixed(2)
                    }}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <div class="title_item">
                    <span>当天耗电量(kw·h)</span>
                    <span class="title_value">{{
                      !itemData.dthdSum
                        ? 0
                        : Number(itemData.dthdSum).toFixed(2)
                    }}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <div class="title_item">
                    <span>电流(A)</span>
                    <span class="title_value">{{
                      !itemData.dlSum ? 0 : Number(itemData.dlSum).toFixed(2)
                    }}</span>
                  </div>
                </el-col>
              </el-row>
            </el-col>

            <el-col :span="12">
              <el-row>
                <el-col :span="24">
                  <div class="title_item">
                    <span>当周耗电量(kw·h)</span>
                    <span class="title_value">
                      {{
                        !itemData.dzhdSum
                          ? 0
                          : Number(itemData.dzhdSum).toFixed(2)
                      }}
                    </span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <div class="title_item">
                    <span>当月耗电量(kw·h)</span>
                    <span class="title_value">{{
                      !itemData.dyhdSum
                        ? 0
                        : Number(itemData.dyhdSum).toFixed(2)
                    }}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <div class="title_item">
                    <span>总耗电量(kw·h)</span>
                    <span class="title_value">{{
                      !itemData.zhdl ? 0 : Number(itemData.zhdl).toFixed(2)
                    }}</span>
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-row style="margin-top: 10px; margin-right: 5px">
          <img src="@/assets/img/chart/sbsj.svg" alt="" srcset="" />
          <img
            src="@/assets/img/chart/dldy.svg"
            style="float: right"
            alt=""
            srcset=""
          />
        </el-row>
        <el-row>
          <el-table
            border
            v-loading="isLoading"
            :data="tableData"
            style="width: 100%"
            max-height="300"
            @sort-change="changeSort"
            :default-sort="{ prop: 'devSn', order: 'ascending' }"
          >
            <el-table-column
              prop="devSn"
              sortable
              :sort-orders="['descending', 'ascending']"
              label="设备编号"
              min-width="10%"
            >
              <template slot-scope="scope"
                >{{ scope.row.gongxu }}{{ parseInt(scope.row.devSn) }}</template
              >
            </el-table-column>
            <el-table-column min-width="10%" label="实时平均电流(A)">
              <template slot-scope="scope">{{
                parseFloat(scope.row.avgI).toFixed(1)
              }}</template>
            </el-table-column>
            <el-table-column min-width="10%" label="实时平均电压(V)">
              <template slot-scope="scope">{{
                parseFloat(scope.row.avgU).toFixed(1)
              }}</template>
            </el-table-column>
            <el-table-column min-width="10%" label="当班耗电量(kw·h)">
              <template slot-scope="scope">
                <div v-if="getMycount() == 'morning'">
                  {{ parseFloat(scope.row.dthd * 10).toFixed(1) }}
                </div>
                <div v-else>
                  {{ parseFloat(scope.row.dbhd * 10).toFixed(1) }}
                </div>
              </template>
            </el-table-column>
            <el-table-column min-width="10%" label="当天耗电量(kw·h)">
              <template slot-scope="scope">{{
                parseFloat(scope.row.dthd * 10).toFixed(1)
              }}</template>
            </el-table-column>
            <el-table-column min-width="10%" label="当周耗电量(kw·h)">
              <template slot-scope="scope">{{
                parseFloat(scope.row.dzhd * 10).toFixed(1)
              }}</template>
            </el-table-column>
            <el-table-column min-width="10%" label="当月耗电量(kw·h)">
              <template slot-scope="scope">{{
                parseFloat(scope.row.dyhd * 10).toFixed(1)
              }}</template>
            </el-table-column>
          </el-table>
        </el-row>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import dongligui from '../../dongligui';
export default {
  name: 'dialog_dongli',
  components: {
    dongligui
  },
  data() {
    return {
      Dialog: false,
      isLoading: true,
      title: '',
      flag: '',
      title_l: '',
      itemData: {},
      data: '',
      tableData: []
    };
  },

  mounted() {},
  computed: {
    dongLiNewestState() {
      return this.$store.state.workshop.dongLiNewestState;
    }
  },
  watch: {
    dongLiNewestState: {
      immediate: true,
      handler(val) {
        if (val.code == 1) {
          this.createTable(val.data);
        }
      }
    }
  },
  methods: {
    // 从后台获取数据,重新排序
    changeSort(val) {
      console.log(val); // column: {…} order: "ascending" prop: "date"
      // 根据当前排序重新获取后台数据,一般后台会需要一个排序的参数
    },
    getMycount() {
      //判断是上午还是下午+晚上
      let self = this;
      let date = new Date();
      if (date.getHours() >= 0 && date.getHours() < 12) {
        return 'morning';
      } else {
        return 'afternoon';
      }
    },
    createTable(data) {
      this.isLoading = false;
      this.tableData = data.dlgList;
      this.tableData.forEach(element => {
        element.devSn = parseInt(element.devSn);
      });
      this.itemData = data.dlgSum;
    },

    // 当前时间
    getDate() {
      let nowDate = new Date();
      let date = {
        year: nowDate.getFullYear(),
        month: nowDate.getMonth() + 1,
        date: nowDate.getDate()
      };
      return date.year + '-' + date.month + '-' + date.date;
    },

    showDialog(data) {
      this.data = data;
      this.flag = this.data.title;
      // this.title = this.data.title + "详情";
      this.Dialog = true;
    },
    closeDialog() {
      this.tableData = [];
      this.itemData = {};
      this.Dialog = false;
      this.isLoading = true;
      this.$parent.closeHandle('secDongLiTimer');
    }
  }
};
</script>

<style lang="scss" scoped>
.el-row {
  margin-bottom: 5px;
  &:last-child {
    margin-bottom: 0;
  }
}
.echarts {
  width: 100%;
  height: 200px;
}
.title {
  color: rgb(111, 155, 184);
}
::v-deep.el-table {
  overflow-y: hidden !important;
}
</style>
